<template>
  <div class="digit-wrapper">
    <input
      type="tel"
      @focus="focus=true"
      @blur="focus=false"
      ref="input"
      maxlength="4"
      autofocus
      class="input-code"
      @input="change"
      v-model="digits"
    />
    <ul class="code-ul">
      <li
        maxlength="1"
        :class="{'li--show':digits.length>0,'li--active':digits.length==0&&focus}"
        class="code-li"
      >{{digits[0]?digits[0]:''}}</li>
      <li
        maxlength="1"
        :class="{'li--show':digits.length>1,'li--active':digits.length==1&&focus}"
        class="code-li"
      >{{digits[1]?digits[1]:''}}</li>
      <li
        maxlength="1"
        :class="{'li--show':digits.length>2,'li--active':digits.length==2&&focus}"
        class="code-li"
      >{{digits[2]?digits[2]:''}}</li>
      <li
        maxlength="1"
        :class="{'li--show':digits.length>3,'li--active':digits.length==3&&focus}"
        class="code-li"
      >{{digits[3]?digits[3]:''}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["code"],
  data() {
    return {
      digits: "",
      focus: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.input.focus();
    });
  },
  methods: {
    change() {
      this.$emit("update:code", this.digits);
      if (this.digits.length == 4) {
        this.$emit("complete", this.digits);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.digit-wrapper {
  position: relative;

  .input-code {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    opacity: 0;
    caret-color: transparent;
  }
  .code-ul {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    height: 50px;

    .code-li {
      width: 53px;
      font-size: 23px;
      margin-right: 8px;
      border: none #fff;
      font-weight: 500;
      color: black;
      border-bottom: 2px solid #cccccc;
      display: flex;
      align-items: center;
      justify-content: center;
      &.li--show {
        border: none #fff;
        border-bottom: 2px solid #4797f3;
      }
      &.li--active {
        animation: shine 1350ms infinite normal;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
@keyframes shine {
  0% {
    border-bottom: 2px solid #fff;
  }
  30% {
    border-bottom: 2px solid #4797f3;
  }
  80% {
    border-bottom: 2px solid #4797f3;
  }
  100% {
    border: none #fff;
    border-bottom: 2px solid #fff;
  }
}
</style>
